<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <el-alert title="当前在线" type="success" v-if="isLive"></el-alert>
    <el-alert title="微信已离线" type="error" v-else></el-alert>
    <el-row style="margin-top: 20px;">
        <el-col :span="6">
            <el-button type="primary" @click="login">获取登录二维码</el-button>
            <br>
            <br>
            <br>
            <el-button @click="getRepeat">检测重复群成员</el-button>
            <br>
            <br>
            <br>
            <el-button type="danger" @click="offline">下线微信</el-button>
        </el-col>
        <el-col :span="18">
            <img :src="qr" v-if="showQr">
        </el-col>
    </el-row>
    <el-table
            :data="members"
            border
            style="width: 100%;margin-top: 20px">
        <el-table-column
                prop="id"
                label="用户id">
        </el-table-column>
        <el-table-column
                prop="nickname"
                label="用户昵称">
        </el-table-column>
        <el-table-column
                prop="groupId"
                label="群组id">
        </el-table-column>
        <el-table-column
                prop="displayName"
                label="群组备注">
        </el-table-column>
        <el-table-column
                prop="groupName"
                label="群组昵称">
        </el-table-column>
    </el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            members: [],
            isLive: false,
            qr: "/qr/QR.jpg",
            showQr: false,
        },
        methods: {
            getRepeat() {
                let _this = this;
                $.get("/groups/repeat", function (data) {
                    _this.members = data;
                })
            },
            checkStatus() {
                let _this = this;
                $.get("/login/status", function (status) {
                    _this.isLive = status;
                })
            }
            ,
            offline() {
                let _this = this;
                $.get("/login/offline", function () {
                    _this.isLive = false;
                })
            }
            ,
            login() {
                let _this = this;
                $.get("/login", function () {
                    _this.qr = "/qr/QR.jpg?" + new Date().getTime()
                    _this.showQr = true;
                })
            },
        }
        ,
        created: function () {
            window.setInterval(this.checkStatus, 5000);
        }
    })
</script>
</html>